import styles from "@styles/patient.module.scss";
import { Helmet } from "react-helmet";
import Header from "@shared/header";
import classNames from "classnames";
import { useRequestPatientsQuery } from "@store/apiSlice/patientApiSlice";
import useLoading from "@hooks/useLoading";
import { useState } from "react";
import { Popup } from "antd-mobile";
import EditPatient from "@pages/patient/widgets/edit";
import React from "react";

interface Props {
   // 要编辑的患者对象
   patient?: Patient;
  // 控制弹框显示和隐藏
  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
}
export default function Patient({ setVisible ,patient}: Props) {
  // 用于存储要编辑的患者对象
  const [patient, setPatient] = useState<undefined | Patient>();
   // 控制编辑患者弹框的显示和隐藏
  const [visible, setVisible] = useState(false);
   // 发送请求获取患者列表
   const { data, isSuccess, isLoading } = useRequestPatientsQuery(undefined);
   // 加载中用户提示
   useLoading(isLoading, isSuccess);
  return (
    <>
      <Helmet>
        <title>优医问诊-家庭档案</title>
      </Helmet>
      <div className={styles.page}>
        <Header title={`${typeof patient === "undefined" ? "添加" : "编辑"}患者`} backHandler={() => setVisible(false) />
        {isSuccess &&
          data.data.map((item) => (
            <div
              key={item.id}
              className={classNames(styles.item, {
                [styles.active]: item.defaultFlag === 1,
              })}
            >
              <div className={styles.info}>
                <div className={styles.i_1}>
                  <span className={styles.name}>{item.name}</span>
                  <span className={styles.id}>{item.idCard}</span>
                  {item.defaultFlag === 1 && <span className={styles.default}>默认</span>}
                </div>
                <div className={styles.i_2}>
                  <span className={styles.sex}>{item.genderValue}</span>
                  <span className={styles.age}>{item.age}岁</span>
                </div>
              </div>
              <button className={styles.edit}>
                <img src={require("@icons/user/edit.svg").default} alt="编辑患者" />
              </button>
            </div>
          ))}
            <div
          onClick={() => {
            setVisible(true);
            setOperator("add");
          }}
        >
          <span>添加患者</span>
        </div>
      </div>
      <Popup visible={visible} position="right" bodyStyle={{ width: "100vw" }}>
        <EditPatient setVisible={setVisible} />
      </Popup>
      <button
        onClick={() => {
          setVisible(true);
          setPatient(item);
        }}
      >
        <img alt="编辑患者" />
      </button>
    	<div
        onClick={() => {
          setVisible(true);
          setPatient(undefined);
        }}
      >
        <span>添加患者</span>
      </div>
    	<Popup>
      	<EditPatient patient={patient} />
    	</Popup>
    </>
  );
}